{% load static %}
<!DOCTYPE html>
<!-- saved from url=(0178)https://show.17sucai.com/preview/3/2022-09-01/%E7%94%9F%E6%97%A5%E5%BF%AB%E4%B9%90/%E2%95%94%C2%B7%E2%95%9A%E2%95%92%E2%94%90%E2%88%9E%E2%94%94%E2%95%93/happy-birthday/index.html -->
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>Wang Tao</title>
    <link rel="stylesheet" href="{% static 'css/style.css' %}">

</head>
<body>
<!-- partial:index.partial.html -->
<div class="birthday">
    <div class="birthday_inner">
        <div class="birthday_inner__modal">
            <div class="modal_image">
                <img src="{% static 'js/saved_resource' %}">
            </div>
            <div class="modal_content">
                <h1>Title</h1>
                <p>Content</p>
                <button>OK, Let's go</button>
            </div>
        </div>
        <div class="birthday_inner__stage stage1">
            <div class="intro_cake">
                <img class="intro" src="{% static 'img/cake.png' %}">
            </div>
            <button class="start">Let’s make a cake</button>
        </div>
        <div class="birthday_inner__stage stage2">
            <h1>Let’s get mixing</h1>
            <h2>OK, so let's start by mixing all of our ingredients together in a big mixing bowl. Click the mix button
                below until the mixture is nice and smooth.</h2>
            <div class="mix">
                <div class="mix_bowl">
                    <img src="{% static 'img/bowl.png' %}">
                </div>
                <div class="mix_spoon">
                    <img src="{% static 'img/spoon.png' %}">
                </div>
            </div>
            <button class="mixer">Click here to mix</button>
        </div>
        <div class="birthday_inner__stage stage3">
            <h1>Let’s bake our base</h1>
            <h2>Alright, let’s get this mixture in the oven. Go ahead and drag the cake mix into the digital oven. Then
                put your feet up while it bakes.</h2>
            <div class="oven ui-droppable">
                <img src="{% static 'img/oven.png' %}">
            </div>
            <div class="tin ui-draggable ui-draggable-handle" style="position: relative;">
                <img src="{% static 'img/tin.png' %}">
            </div>
        </div>
        <div class="birthday_inner__stage stage4">
            <h1>Let’s make the cake</h1>
            <h2>Build your cake in any order you want. Click an ingredient to add it to your cake. You can add more than
                one item e.g 2 vanilla sponges but only 5 bases and 6 fillings. Hit the button at the bottom to finish
                your cake and add your candles. Make sure you leave some icing for the top of your cake!</h2>
            <div class="svg">
                Happy birthday! ~永远18~
            </div>
            <div class="options">
                <div class="sponges inactive">
                    <h3>Sponges</h3>
                    <h5>
                        <span>0</span>
                        / 5
                    </h5>
                    <div class="item">
                        <div class="item_inner vanilla"></div>
                        <h4>Vanilla</h4>
                    </div>
                    <div class="item">
                        <div class="item_inner strawberry"></div>
                        <h4>Pink</h4>
                    </div>
                    <div class="item">
                        <div class="item_inner fruit"></div>
                        <h4>Fruit</h4>
                    </div>
                </div>
                <div class="fillings">
                    <h3>Fillings/icing</h3>
                    <h5>
                        <span>0</span>
                        / 6
                    </h5>
                    <div class="item">
                        <div class="item_inner jam"></div>
                        <h4>Jam</h4>
                    </div>
                    <div class="item">
                        <div class="item_inner cream"></div>
                        <h4>Cream</h4>
                    </div>
                    <div class="item">
                        <div class="item_inner choc"></div>
                        <h4>Choc</h4>
                    </div>
                    <div class="item">
                        <div class="item_inner lemon"></div>
                        <h4>Lemon</h4>
                    </div>
                </div>
            </div>
            <div class="cakemake">
                <div class="base"></div>
            </div>
            <div class="startagain">Start again</div>
            <button class="add">Add the candle</button>
            <button class="sa">Start again</button>
        </div>
    </div>
</div>
<!-- partial -->
<script src="{% static 'js/jquery-2.2.4.min.js' %}"></script>
<script src="{% static 'js/jquery-ui.min.js' %}"></script>
<script src="{% static 'js/script.js' %}"></script>


</body>
</html>